<template>
	<view class="">
		<u-navbar :is-back="true" title="学员请假" back-icon-color="#ffffff" title-color="#ffffff"
			:background="{backgroundColor:'#E62131'}"></u-navbar>
		<view class="atopheig">
			<view class="topchenlistd" :style="'top:'+height+'px;'">
				<div style="width: 90%;">
					<u-search placeholder="请输入内容" v-model="parms.keyword" :clearabled="true" :show-action="false"
						input-align="center" @change="sherchs"></u-search>
				</div>
				<u-icon name="list-dot" color="#E62131" size="32" @click="modalClick"></u-icon>
			</view>
		</view>
		<view class="lsitreat" v-for="(item,index) in tabList" :key="index" @click="listAdtops(item)">
			<!-- <view class="leftimg" style="margin-right: 20rpx;">
				<image style="width: 50rpx;height: 50rpx;" src="../../static/images/me.png" mode=""></image>
				<view class="" style="margin-top: 10rpx;font-weight: bold;font-size: 26rpx;">
					{{item.studentInfo.name}}
				</view>
			</view> -->
			<view class="" style="width: 100%;">
				<view class="toptitle fliexs space_between">
					<span class="names">{{item.askType==0?'病假':item.askType==1?'事假':'其他'}} <span
							class="cardtitle">{{item.askStatus==0?'待审核':item.askStatus==1?'审核通过':item.askStatus==2?'审核拒绝':item.askStatus==3?'作废':''}}</span></span>
					<span style="color: #606266;">{{item.createDate}}</span>
				</view>
				<view class="list_btns colors">
					<div class="lisntcenter fliexs">
						<span>{{item.workOut.courseName}}</span>
					</div>
					<div class="lisntcenter fliexs">
						<span>{{item.workOut.classYear}}-{{item.workOut.classDate}}</span>
					</div>
				</view>
			</view>
		</view>
		<view class="bneads w-btn-fixed">
					<div class="btnsdslst fliexs space_between">
						<view class="btn_left right" @click="okllists">
							按课请假
						</view>
					</div>
				
				</view>

		<u-popup v-model="show" mode="right" z-index="99" :safe-area-inset-bottom="true" width="80%">
			<view class="centers">
				<view class="formsa">
					<view class="" style="padding: 0 10rpx;">
						<u-form :model="form" ref="uForm" label-width="150rpx" label-position="top">
							<u-form-item label="申请时间:">
								<span @click="isckickTime(1)">{{form.applyStartTime}}</span> <span
									style="padding: 0 40rpx;">至</span> <span
									@click="isckickTime(2)">{{form.applyEndTime}}</span>
							</u-form-item>
							<u-form-item label="请假类型:">
								<u-radio-group v-model="form.applyType">
									<u-radio v-for="(item, index) in typelist" :key="index"
										@change="radioChange($event,item.value)" :name="item.name"
										:disabled="item.disabled">
										{{item.name}}
									</u-radio>
								</u-radio-group>
							</u-form-item>
							<u-form-item label="审批状态:">
								<u-radio-group v-model="form.askStatus">
									<u-radio v-for="(item, index) in statuslist" :key="index"
										@change="radioOneChange($event,item.value)" :name="item.name"
										:disabled="item.disabled">
										{{item.name}}
									</u-radio>
								</u-radio-group>
							</u-form-item>
						</u-form>
					</view>
					<view class="btnlst fliexs space_between">
						<view class="btn_left center" @click="clichs">
							清空
						</view>
						<view class="btn_left right" @click="oklistTlist">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-picker mode="time" v-model="showdate" :params="dateparams" @confirm="confirmdate"
			confirm-color="#E62131"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				show: false,
				showdate: false,
				dateparams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				typelist: [{
					value: 0,
					name: '病假',
					disabled: false
				}, {
					value: 1,
					name: '事假',
					disabled: false
				}, {
					value: 2,
					name: '其他',
					disabled: false
				}],
				statuslist: [{
					value: 0,
					name: '待审核',
					disabled: false
				}, {
					value: 1,
					name: '审核通过',
					disabled: false
				}, {
					value: 2,
					name: '审核拒绝',
					disabled: false
				}, {
					value: 2,
					name: '作废',
					disabled: false
				}],
				form: {
					applyStartTime: '请选择',
					applyEndTime: '请选择',
					applyType: '',
					applyStatus: '',
				},
				dateindex: 1,
				height: 0,

				parms: {
					keyword: '',
					limit: 10,
					applyStartTime: "",
					applyEndTime: '',
					page: 1,
				},
				tabList: [],
			}
		},

		onLoad() {

		},
		onReady() {
			this.isheightapi()
		},
		onShow() {
			this.sherchList()
		},
		onReachBottom() {
			this.parms.page += 1
			this.studentaskListApi()
		},
		methods: {
			okllists(){
				uni.navigateTo({
					url: "./classCourse"
				})
			},
			
			radioChange(e, value) {
				this.parms.applyType = value
			},
			radioOneChange(e, value) {
				
				this.parms.applyStatus = value
			},
			sherchList() {
				this.parms.page = 1;
				this.tabList = [];
				this.studentaskListApi()
			},
			studentaskListApi() {
				uni.$api.common.studentaskList(this.parms).then((res) => {
					if (res.count === this.tabList.length) {
						uni.showToast({
							title: '没有更多了',
							icon: 'none',
							duration: 2000
						});
					} else {
						res.result.forEach((item) => {
							this.tabList.push(item)
						})
					}
					// this.allconter = res.count
				});
			},
			// 去详情
			listAdtops(item) {
				// uni.navigateTo({
				// 	url: "./studentLeaveDetail?id=" + item.id
				// })
			},
			studentAddClick(item) {
				uni.navigateTo({
					url: "./studentAdd"
				})
			},
			isckickTime(index) {
				this.dateindex = index
				this.showdate = true;
			},
			// 确认时间
			confirmdate(e) {
				if (this.dateindex == 1) {
					this.form.applyStartTime = e.year + '-' + e.month + '-' + e.day
				}
				if (this.dateindex == 2) {
					this.form.applyEndTime = e.year + '-' + e.month + '-' + e.day
				}
			},
			// 搜索
			sherchs() {
				this.sherchList()
			},
			modalClick() {
				this.show = true;
			},
			// 清空
			clichs() {
				this.form = {
					applyStartTime: '请选择',
					applyEndTime: '请选择',
					applyType: '',
					applyStatus: '',
				};
				this.parms.applyType = '';
				this.parms.applyStatus = '';
			},
			// 确定
			oklistTlist() {
				if (this.form.applyStartTime == '请选择') {
					this.form.applyStartTime = ''
					this.parms.applyStartTime = ''
				}
				if (this.form.applyEndTime == '请选择') {
					this.form.applyEndTime = ''
					this.parms.applyEndTime = ''
				}
				this.parms.applyStartTime = this.form.applyStartTime
				this.parms.applyEndTime = this.form.applyEndTime
				this.sherchList()
				this.show = false
			},
			isheightapi() {
				uni.getSystemInfo({
					success: (e) => {
						// this.compareVersion(e.SDKVersion, '2.5.0')
						let statusBar = 0
						let customBar = 0


						// #ifdef MP
						statusBar = e.statusBarHeight
						customBar = e.statusBarHeight + 45
						if (e.platform === 'android') {
							// this.$store.commit('SET_SYSTEM_IOSANDROID', false)
							customBar = e.statusBarHeight + 50
						}
						// #endif


						// #ifdef MP-WEIXIN
						statusBar = e.statusBarHeight
						// @ts-ignore
						const custom = wx.getMenuButtonBoundingClientRect()
						customBar = custom.bottom + custom.top - e.statusBarHeight
						// #endif


						// #ifdef MP-ALIPAY
						statusBar = e.statusBarHeight
						customBar = e.statusBarHeight + e.titleBarHeight
						// #endif


						// #ifdef APP-PLUS
						console.log('app-plus', e)
						statusBar = e.statusBarHeight
						customBar = e.statusBarHeight + 45
						// #endif


						// #ifdef H5
						statusBar = 0
						customBar = e.statusBarHeight + 45
						// #endif

						// 这里你可以自己决定存放方式，建议放在store中，因为store是实时变化的
						console.log(statusBar, customBar, e)
						this.height = customBar;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.atopheig {
		width: 100%;
		height: 92rpx;
		position: relative;
	}

	.topchenlistd {
		position: fixed;
		left: 0;
		right: 0;
		margin: auto;
		background-color: #ffffff;
		z-index: 22;
		padding: 30rpx 30rpx 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.centers {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;

		.formsa {
			width: 100%;
			height: 75%;
		}
	}

	.btnlst {
		margin-top: 350rpx;

		.btn_left {
			width: 50%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #b1b1b1;
			border: 1rpx solid #e1e1e1;
		}

		.right {
			background-color: #E62131;
			color: #ffffff;
		}
	}

	.alltext {
		padding: 15rpx 30rpx;
	}

	.colors {
		color: #606266;
	}

	.lsitreat {
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f2f2f2;
		display: flex;
		align-items: center;

		.toptitle {
			.names {
				font-weight: bold;
				font-size: 20rpx;

				.cardtitle {
					display: inline-block;
					padding: 2rpx 6rpx;
					// background-color: #f2f2f2;
					border: 1rpx solid #E62131;
					border-radius: 5rpx;
					margin-left: 10rpx;
					font-size: 20rpx;
					color: #E62131;
				}
			}
		}

		.tiext_center {
			width: 100%;
			margin: 10rpx 0;
			white-space: nowrap; //不换行
			overflow: hidden; //超出部分隐藏
			text-overflow: ellipsis; //文本溢出显示省略号
		}

		.lisntcenter {
			margin-top: 10rpx;
		}
	}

	.addings {
		width: 90rpx;
		height: 90rpx;
		position: fixed;
		right: 30rpx;
		bottom: 250rpx;
	}
	.btnsdslst {
			// margin-top: 350rpx;
		
			.btn_left {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #b1b1b1;
				border: 1rpx solid #e1e1e1;
			}
		
			.right {
				background-color: #E62131;
				color: #ffffff;
			}
		}
</style>